<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
  <style>
    body {
      font-family: Microsoft YaHei,Helvetica,Arial,sans-serif;
      background-color: #fff;
      -webkit-font-smoothing: subpixel-antialiased;
    }
    .navi {
      height: 100px;
      border: 1px solid red;
      line-height: 100px;
      display: flex;
    }
    .el-menu {
      height: 100px;
    }
    .el-menu.el-menu--horizontal {
      border-bottom: 0px;
    }
    .el-menu--horizontal>.el-menu-item {
      height: 100px;
      /*text-align: center;*/
      /*line-height: 100px;*/
      /*font-size: 18px;*/
      color: black;
      border-bottom: 0px;
      padding: 0px 25px;
    }
    .el-menu--horizontal>.el-menu-item.is-active {
      color: black;
      border-bottom: 0px;
    }
    .el-menu--horizontal .el-menu-item:not(.is-disabled):focus, .el-menu--horizontal .el-menu-item:not(.is-disabled):hover{
      height: 100px;
      text-align: center;
      line-height: 100px;
      font-size: 18px;
      color: white;
      background-color: red;
    }
    .el-input__inner {
      width: 250px;
      margin: 0 auto;
      border-radius: 20px;
    }
    .el-input__inner:hover {
      border-color: red;
    }
    .el-button:focus, .el-button {
      height: 38px;
      position: relative;
      top: 1px;
    }
    .el-button:focus, .el-button:hover {
      border-color: red;
    }
    .el-divider--horizontal {
      margin: 12px 0px;
    }
    .el-card__body {
      padding: 0px;
    }
    .imax3d {
      width: 69px;
      height: 25px;
      position: relative;
      top: 10px;
      right: 8px;
    }
    .el-card.is-always-shadow, .el-card.is-hover-shadow:focus, .el-card.is-hover-shadow:hover {
      box-shadow: 0 2px 12px 0 rgba(0,0,0,0);
      border-color: rgba(255,255,255,0);
    }
    .main_box {
      width: 330px;
      padding: 0px;
    }
  </style>
</head>
<body>
<div id="app">
  <el-container>
    <el-header style="width: 1200px;height: 125px;border: 1px solid red;margin: 0 auto">
      <el-row gutter="10">
        <el-col span="16"><div class="navi">
          <img src="logo.jpg" width="200px" height="100px">
          <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
            <el-menu-item class="item_e" index="1">首页</el-menu-item>
            <el-menu-item class="item_e" index="2">电影</el-menu-item>
            <el-menu-item class="item_e" index="3">影院</el-menu-item>
            <el-menu-item class="item_e" index="4">演出</el-menu-item>
            <el-menu-item class="item_e" index="5">榜单</el-menu-item>
            <el-menu-item class="item_e" index="6">热点</el-menu-item>
            <el-menu-item class="item_e" index="7">商城</el-menu-item>
          </el-menu>
        </div></el-col>
        <el-col span="8"><div class="navi" style="text-align: center">
          <el-input v-model="input" placeholder="请输入搜索内容" style="position: relative;right: 10px"><el-button slot="suffix" icon="el-icon-search" circle style="position: relative;right: 20px;border-color: white" ></el-button></el-input>
          <el-button icon="el-icon-user" style="width: 100px;height: 99px;border-color: white;padding: 0px"></el-button>  <!--图标--------------------------------------->
        </div></el-col>
      </el-row>
      <el-divider></el-divider>
    </el-header>
    <el-main style="width: 1300px;height: 1600px;border: 1px solid red;margin: 0 auto;padding-top: 0px;">
      <div style="width: 1200px;height: 700px;border: 1px solid blue;margin: 0 auto">
        <el-row gutter="10">
          <el-col span="16"><div class="content_d" style="border: 1px solid red;height: 700px">
            <div><h1 style="display: inline-block;color: red;font-weight: bold;font-size: 26px;margin: 5px 0px 0px 12px">正在热映（46部）</h1>
              <span style="font-weight: bold;font-size: 14px;color: red;float: right">全部></span></div>
            <div class="card_d">
              <el-row gutter="5">
                <el-col span="6" v-for="m in arr_movie_first">
                  <el-card  style="width: 165px; margin: 20px auto; padding-left: 5px">
                    <!--<div style="height: 220px;border: 1px solid green; :background-image: url('m.imgUrl')">-->
                    <div v-bind:style="{'background-image': 'url(' + m.imgUrl + ')','height':'220px','border':'1px solid green','background-size':'cover' }">   <!--循环遍历背景图片---------------------------->
                      <div class="imax3d" v-bind:style="{'background-image': 'url(' + m.imaxUrl + ')'}"></div>
                      <div style="width: 152px;height: 30px;border: 1px solid red;margin: 0px auto;position: relative;top:164px;background:linear-gradient(to top,rgba(0,0,0,1),rgba(255,255,255,0.2))">
                        <span style="color: #FFFFFF;font-size: 18px">{{m.title}}</span>
                        <span style="color: #FFB400;float: right;position: relative;right: 5px">
                          <i class="integer" style="font-size: 18px">{{m.score_1}}</i>
                          <i class="fraction" style="font-size: 14px">{{m.score_2}}</i>
                        </span>
                      </div>
                    </div>
                    <div style="height: 40px;border: 1px solid green"><a href="" style="display: block;text-align: center;line-height: 40px;text-decoration: none;color: red">购票</a></div>
                  </el-card>
                </el-col>
              </el-row>
            </div>
          </div></el-col>
          <el-col span="8"><div class="content_d" style="border: 1px solid red;height: 700px" >
            <div><h1 style="display: inline-block;color: red;font-weight: bold;font-size: 26px;margin: 5px 0px 20px 12px;border: 1px solid red">今日票房</h1></div>
            <div>
              <el-menu
                      default-active="2"
                      class="el-menu-vertical-demo"
              >
                <div style="position: relative;width: 360px;height: 80px;margin: 0px auto;margin-bottom: 25px;border: 1px solid red">
                  <div style="position: absolute;top: 0px;display: inline-block;width: 120px;height: 80px;border: 1px solid red;background-image: url('https://p0.pipi.cn/mmdb/25bfd6922c951b0e13ddd25d6efa7c2089c04.jpg?imageView2/1/w/120/h/80');background-size: cover">
                    <img  src="">
                  </div>
                  <div style="position: absolute;right: 0px;display: inline-block;width: 230px;height: 80px;border: 1px solid blue;margin: 0px">
                    <p style="margin: 5px 0px 18px 5px;padding: 0px;font-weight: normal;color:#333333;font-size: 18px">超级马里奥大电影</p>
                    <h5 style="font-size: 16px;color: #EF4238;margin: 5px 0px 5px 5px">526.84万</h5>
                  </div>
                </div>
                <el-menu-item index="4" style="padding: 0px;margin: 0px auto;width: 380px;height: 70px;margin-top: 15px" v-for="m in arr_movie_second">
                  <span slot="title"><span><span><i :style="{'font-size': '18px','font-weight': 'bold','color': m.color,'margin-left': '10px','margin-right': '15px','position': 'relative','bottom': '2px'}">{{m.index}}</i></span><span style="font-size: 18px">{{m.title}}</span></span><span style="font-size: 16px;color: #EF4238;float:right;position: relative;top: 6px;right: 3px">{{m.box}}</span></span>
                </el-menu-item>
              </el-menu>
              <div style="width: 320px;height: 120px;border: 1px solid red;margin: 0px auto;position: relative;top: 350px">
                <el-container>
                  <el-aside style="border: 1px solid red;width: 40px;height: 120px;background-color: #EF4238"><h3 style="font-size: 20px;margin: 10px 0px 0px 0px;padding: 0px;text-align: center;color: white;font-weight: normal">今日大盘</h3></el-aside>
                  <el-main class="main_box">
                    <p style="color: #EF4238;width: 240px"><span style="font-size: 32px;font-weight: bold;padding-left: 10px">2461.1</span><span style="margin-right: 30px">万</span><span>查看更多></span></p>
                    <p style="font-size: 10px;margin-top: 30px;margin-left: 5px;color: #999999">北京时间 12:07:37  猫眼专业版实时票房数据</p>
                  </el-main>
                </el-container>
              </div>
            </div>
            <div></div>
          </div></el-col>
        </el-row>
      </div>
      <div style="width: 1200px;height: 500px;border: 1px solid blue;margin: 0 auto"></div>
      <div style="width: 1200px;height: 500px;border: 1px solid blue;margin: 0 auto"></div>
    </el-main>
    <el-footer style="width: 1200px;height: 500px;border: 1px solid red;margin: 0 auto">Footer</el-footer>
  </el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
 let v = new Vue({
    el: '#app',
    data: function() {
      return {
        activeIndex: '1',
        activeIndex2: '1',
        input: '',
        movie_first: {imgUrl: "",title: "",score_1: "",score_2: "",imaxUrl: ""},
        arr_movie_first: [
          {imgUrl: "https://p0.pipi.cn/mmdb/fb73869a3390fa281e395ba5f89fe7142e4ab.jpg?imageView2/1/w/160/h/220",title: "铃芽之旅",score_1: "9.",score_2: "3",imaxUrl: ""},
          {imgUrl: "https://p0.pipi.cn/mmdb/fb7386bee7ac7e338fd7c316918ec78e573ba.jpg?imageView2/1/w/160/h/220",title: "灌篮高手",score_1: "9.",score_2: "7",imaxUrl: ""},
          {imgUrl: "https://p0.pipi.cn/mmdb/fb7386beb53ddd338f07ac311aa9711648537.jpg?imageView2/1/w/160/h/220",title: "超级马里奥",score_1: "9.",score_2: "2",imaxUrl: ""},
          {imgUrl: "https://p0.pipi.cn/mmdb/fb7386025bf0fad23cb12daf49eaf31cfc81a.jpg?imageView2/1/w/160/h/220",title: "忠犬八公",score_1: "9.",score_2: "9",imaxUrl: ""},
          {imgUrl: "https://p0.pipi.cn/mmdb/fb73860202f5bf16bd50c8ad1fb8c34d00c50.jpg?imageView2/1/w/160/h/220",title: "暴风",score_1: "8.",score_2: "9",imaxUrl: ""},
          {imgUrl: "https://p0.pipi.cn/mmdb/fb73860233906dc9fde5bceebc36096af5849.jpg?imageView2/1/w/160/h/220",title: "龙马精神",score_1: "9.",score_2: "0",imaxUrl: ""},
          {imgUrl: "https://p0.pipi.cn/mmdb/fb73869af2a51b339e537c802afb40db7a7fe.jpg?imageView2/1/w/160/h/220",title: "泰坦尼克号",score_1: "9.",score_2: "6",imaxUrl: ""},
          {imgUrl: "https://p0.pipi.cn/mmdb/fb73869a11eb12338f537cc474777234afe0c.jpg?imageView2/1/w/160/h/220",title: "宇宙探索",score_1: "8.",score_2: "8",imaxUrl: ""},
        ],
        movie_second: {title: "",box: "",index: "",color: ""},
        arr_movie_second: [
          {title: "铃芽之旅",box: "287.94万",index: "2",color: "#EF4238"},
          {title: "忠犬八公",box: "209.42万",index: "3",color: "#EF4238"},
          {title: "龙马精神",box: "174.67万",index: "4",color: "#999999"},
          {title: "泰坦尼克号",box: "109.29万",index: "5",color: "#999999"},
        ]
      }
    },
    methods:{
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  })
</script>
</html>